<template>
	<view class="realname_page">
		<view class="ts">
			<view class="ts_tip">提示:</view>
			<view class="ts_content">按照国家电子商务法要求，出于上门服务及保障您工钱资 金安全的考虑，请进行实名认证。<span style="color: #00CC7B;">仅按规定实名认证，身 份信息不作其他用途。</span></view>
		</view>
		<block v-if="show">
			<view class="form">
				<u-form>
					<u-form-item label="真实姓名:">
						<u-input v-model="reslname"></u-input>
					</u-form-item>
					<u-form-item label="身份证号:">
						<u-input  v-model="idcard"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="tips">提示：身份证号只供平台确认信息使用</view>
			<view class="front" @click="uploadFront()">
				<block v-if="!idcard_front">
					<view style="width: 100%;height: 150rpx;position: absolute;top: 80rpx;">
					</view>
				</block>
				<block v-else>
					<image style="width: 100%;height: 100%;" :src="idcard_front" ></image>
				</block>
			</view>
			<view class="back" @click="uploadBack()">
				<block v-if="!idcard_back">
					<view style="width: 100%;height: 150rpx;position: absolute;top: 80rpx;">
						<!-- <image src="../../../static/camera.png"></image>
						<view>上传身份证正面</view> -->
					</view>
				</block>
				<block v-else>
					<image style="width: 100%;height: 100%;" :src="idcard_back"></image>
				</block>
			</view>
			<button class="sumbit_btn" @click="sumbitInfo()">提交</button>
		</block>
		<block v-else>
			<view class="istrue">您已经认证过了！</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reslname:'',
				idcard:'',
				idcard_front: '',
				idcard_back: '',
				show:false,
			}
		},
		onShow() {
			if(uni.getStorageSync('isTrue')==0){
				this.show=true
			}
		},
		methods: {
			uploadFront() {
				console.log(123);
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						// this.idcard_front = res.tempFilePaths[0]
						uni.uploadFile({
								url:'https://xcx.chahuolai.com/api/common/upload',
								filePath:res.tempFilePaths[0],
								name:'file',
								header: {
									token: uni.getStorageSync('tokenVal')
								},
								success:result=>{
									let p = JSON.parse(result.data)
									this.idcard_front = p.data.fullurl
									console.log(p,this.idcard_front);
								}
							})
					}
				})
			},
			uploadBack() {
				console.log(456);
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						// this.idcard_back = res.tempFilePaths[0]
						uni.uploadFile({
								url:'https://xcx.chahuolai.com/api/common/upload',
								filePath:res.tempFilePaths[0],
								name:'file',
								header: {
									token: uni.getStorageSync('tokenVal')
								},
								success:result=>{
									let p = JSON.parse(result.data)
									this.idcard_back = p.data.fullurl
									console.log(p,this.idcard_back);
								}
							})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.realname_page {
		width: 100vw;
		height: auto;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #FAFAFA;
		
		.ts{
			width: 100%;
			height: 105rpx;
			display: flex;
			margin-bottom: 32rpx;
			.ts_tip{
				width: 70rpx;
				height: 100%;
				color: #999999;
				font-size: 24rpx;
			}
			.ts_content{
				width: 100%;
				height: 105rpx;
				font-size: 24rpx;
				color: #999999;
			}
			
		}
		.form {
			width: 100%;
			height: 280rpx;
			border-radius: 8rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.tips {
			width: 100%;
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 23rpx;
			margin-top: 30rpx;
		}

		.front {
			width: 100%;
			height: 348rpx;
			background-image: url('../../static/my/idcard.png');
			background-size: 100%;
			position: relative;
			margin-top: 20rpx;

			image {
				display: block;
				width: 104rpx;
				height: 104rpx;
				margin: auto;
				// margin-top: 50rpx;
			}

			view {
				width: 100%;
				height: 40rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
				margin-top: 10rpx;
			}
		}

		.back {
			width: 100%;
			height: 348rpx;
			background-image: url('../../static/my/idcard1.png');
			background-size: 100%;
			position: relative;
			margin-top: 20rpx;

			image {
				display: block;
				width: 104rpx;
				height: 104rpx;
				margin: auto;
			}

			view {
				width: 100%;
				height: 40rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
				margin-top: 10rpx;
			}
		}
	}
	.sumbit_btn{
		margin-top: 200rpx;
		border-radius: 116rpx;
		color: #FFFFFF;
		background-color: #00CC7B;
	}
	.istrue{
		transform: translateX(220rpx) translateY(500rpx);
	}
</style>